<!--
 * @Author: YaYa
 * @Date: 2022-10-12 14:11:15
 * @LastEditTime: 2022-10-18 23:27:01
 * @LastEditors: YaYa
 * @Description:
 * @FilePath: \HeyTea-ui\src\pages\admin\waiter\Details.vue
 * 别乱动！
-->
<template>
  <!-- 顾客详情页 -->
  <div>
    <!-- 头像 -->
    <div class="userFace">
      <img :src="imageUrl" alt="">
      <span @click="toChangeUserface(details1.id)">修改头像</span>
    </div>
    <hr>
    <el-form :model="details1" label-width="120px">
      <el-form-item label="登录用户">
        {{ details1.username }}
      </el-form-item>
      <el-form-item label="用户姓名">
        {{ details1.realname }}
      </el-form-item>
      <el-form-item label="用户手机">
        {{ details1.telephone }}
      </el-form-item>
      <el-form-item label="用户性别">
        {{ details1.gender }}
      </el-form-item>
      <el-form-item label="用户角色">
        <!-- {{ getCatagreName }} -->
      </el-form-item>
      <el-form-item label="用户生日">
        {{ details1.birth }}
      </el-form-item>
      <el-form-item label="邮箱">
        {{ details1.email }}
      </el-form-item>
      <el-form-item label="用户状态">
        {{ details1.status }}
      </el-form-item>
    </el-form>
    <hr>
    <span class="personal" @click="changePerson()">修改个人信息</span>
    <!-- 换头像模态框开始 -->
    <el-dialog title="修改头像" :visible.sync="visible">
      <el-upload
        class="avatar-uploader"
        action="http://121.4.83.32:7001/UploadControlle/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon" />
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="toSubmit(id)">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 换头像模态框结束 -->
    <!-- 个人信息模态框开始 -->
    <el-dialog title="修改个人信息" :visible.sync="personalvisible">
      <el-form ref="myForm" :model="details">
        <el-form-item
          label="用户名"
          prop="username"
          :label-width="formLabelWidth"
        >
          <el-input v-model="details.username" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="姓名"
          prop="realname"
          :label-width="formLabelWidth"
        >
          <el-input v-model="details.realname" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="手机号"
          prop="telephone"
          :label-width="formLabelWidth"
        >
          <el-input v-model="details.telephone" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
          :label-width="formLabelWidth"
        >
          <el-input v-model="details.password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="details.gender">
            <el-radio label="male">男</el-radio>
            <el-radio label="female">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="personalvisible = false">取 消</el-button>
        <el-button type="primary" @click="toSubmitPerson()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 个人信息模态框结束 -->
  </div>
</template>

<script>
import { post } from '@/utils/request'

export default {
  data() {
    return {
      // 模态框显示与隐藏
      visible: false,
      personalvisible: false,
      details: {},
      details1: {},
      formLabelWidth: '80px',
      userUrl: {},
      imageUrl: '',
      // 用户的类别
      catagreyName: '',
      getCatagreName: '',
      id: '',
      params: {
        page: 1,
        pageSize: 10,
        roleId: 1
      },
      form: {}
    }
  },
  computed: {},
  created() {
    this.details = this.$route.query.row

    for (const key in this.details) {
      if (this.details[key] === '' || this.details[key] === null) {
        this.details[key] = '暂无'
      }
    }
    this.details1 = this.details
    this.id = this.details1.id
    // console.log(this.details, "ggggggg");
    // console.log(this.id, "的");
    // this.catagreyName = this.details1[0];
    // this.getCatagreName = this.catagreyName.name;
    // console.log(this.details1, "好");
  },
  mounted() {},
  methods: {
    // 修改个人信息
    changePerson() {
      this.personalvisible = true
    },
    toSubmitPerson() {
      this.$refs.myForm.validate(async(valid) => {
        if (valid) {
          delete this.details.roles
          for (const key in this.details) {
            if (this.details[key] === '暂无') {
              this.details[key] = ''
            }
          }
          // this.details1 = this.details;
          // console.log(this.details, "ggg");
          const res = await post('/baseUser/saveOrUpdate', this.details)
          // console.log(res, "号");
          this.$message({
            type: 'success',
            message: res.message
          })
          this.personalvisible = false
          // this.getpageQuery();
        } else {
          this.$message({
            type: 'error',
            message: '请输入正确的形式'
          })
        }
      })
    },
    // 修改客户头像
    toChangeUserface(id) {
      this.visible = true
      console.log(id)
    },
    async toSubmit(id) {
      // console.log(id, "kkk");
      const res = await post('/baseUser/alterUserface', { id })
      console.log(res)
      this.visible = false
      this.$message({
        message: '修改成功',
        type: 'success'
      })
    },
    handleAvatarSuccess(file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>
<style scoped>
</style>
